<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="addModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl" >

        <div class="modal-title">
          <p>新增部门</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                部门名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="sectionParams.stationName" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否使用：
              </div>
              <select @change="selectIfUse" :value="sectionParams.ifUse">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                上级部门：
              </div>
              <input type="text" readonly="readonly" v-model="stationName" @click="getStationTree" class="modal-text f-l" >
              <input type="hidden" v-model="sectionParams.parentId">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                部门IP：
              </div>
              <input type="text" class="modal-text f-l" v-model="sectionParams.ipAddress" placeholder="格式必须如：196.168.0.1">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                部门地址：
              </div>
              <input type="text" maxlength="50" placeholder="最长50个字符" v-model="sectionParams.address" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                联系电话：
              </div>
              <input placeholder="座机（01012345678）或手机" type="text" v-model="sectionParams.tel" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                组织代码：
              </div>
              <input type="text" maxlength="15" placeholder="最长15个字符" v-model="sectionParams.orgcode" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                部门类型：
              </div>
              <select @change="selectStationNum" v-model="sectionParams.stationNum">
                <option value="-1">请选择部门类型</option>
                <option value="SJ">市局-SJ</option>
                <option value="FJ">分局-FJ</option>
                <option value="ZSJG">直属机构-ZSJG</option>
                <option value="JG">交管-JG</option>
                <option value="PCS">派出所-PCS</option>
                <option value="JCZ">检查站-JCZ</option>
                <option value="JWZ">警务站-JWZ</option>
              </select>
              <!--<input type="text" maxlength="20" placeholder="最长20个字符" v-model="sectionParams.stationNum" class="modal-text f-l">-->
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                覆盖范围：
              </div>
              <input type="text" maxlength="250" placeholder="最长250个字符" v-model="sectionParams.coverRange" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警车数量：
              </div>
              <input type="text" v-model="sectionParams.carCount" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                基地台号：
              </div>
              <input type="text" maxlength="16" v-model="sectionParams.baseNum" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                单位编码：
              </div>
              <input type="text" maxlength="6" v-model="sectionParams.unitNumber" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                经度：
              </div>
              <input type="text" maxlength="12" v-model="sectionParams.longitude" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                纬度：
              </div>
              <input type="text" maxlength="11" v-model="sectionParams.latitude" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" v-model="sectionParams.sort" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                管辖区域：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.glxq" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                人口情况：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.rkqk" class="modal-text f-l">
            </div>


            <div class="modal-row" >
              <div class="modal-form-key f-l">
                社区/责任区：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.sqzrq" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警力情况：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.jlqk" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                重点部位：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.zdbw" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                重点警情：
              </div>
              <input type="text" maxlength="1000" v-model="sectionParams.zdjq" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否直属机构：
              </div>
              <select @change="selectisZsjg" :value="sectionParams.isZsjg">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>
<!--
            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否口子所：
              </div>
              <select @change="selectisCzs" :value="sectionParams.isCzs">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </div>
-->

            <div class="modal-row">
              <div class="modal-form-key f-l">
                是否为业务部门：
              </div>
              <select @change="selectisBusinessDepartment" :value="sectionParams.isBusinessDepartment">
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeModal">取消</button>
          <button
            type="button"
            class="btn btn-info"
            @click="subBtn"
          >确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "AddSection",
    props:["addModalObj"],
    data(){
      return{
        //警员信息
        sectionParams:{
          stationName:"", //部门名称
          ifUse:"1", //是否使用
          parentId:"", //上级部门
          ipAddress:"", //部门IP
          address:"", //部门地址
          tel:"", //联系电话
          orgcode:"",  //组织代码
          stationNum:"-1", //组织编号
          coverRange:"", //覆盖范围
          carCount:"", //警车数量
          baseNum:"", //基地台号
          unitNumber:"", //单位编码
          longitude:"", //经度
          latitude:"", //纬度
          sort:"", //排序
          glxq:"", //管辖区域
          rkqk:"", //人口情况
          sqzrq:"", //社区/责任区
          jlqk:"", //警力情况
          zdbw:"", //重点部位
          zdjq:"", //重点警情
          isZsjg:"0", //是否直属机构
          isCzs:"0", //是否口子所,
          isBusinessDepartment:"0"
        },
        stationName:"",
        //缓存信息
        getSessionStorage:{},
        policeType:[],
        policePosition:[],
        setting : {
          data: {
            simpleData: {
              enable: true
            },
          }
        },
        sectionTreeIShow:false
      }
    },
    mounted(){
      let _this = this;
      this.setting.callback = {
        onClick:function(event,treeId,treeNode){ //新增警员部门树选择
          //console.log(treeNode);
          _this.stationName = treeNode.name;
          _this.sectionParams.parentId = treeNode.id;
          _this.sectionTreeIShow = false;
        }
      };
    },
    created(){
      //警员类型列表
      this.policeTypeFn();
      //警员岗位列表
      this.policePositionFn();
      //日期控件
      $(function () {
        //console.log($("#datetimepicker"));
        $('#date1').datetimepicker({
          language: "zh-CN",
          format: "yyyy-mm-dd",
          minView: "month",
          autoclose: true
        }).on("changeDate",function(ev){
          ////console.log(ev.date.valueOf());
        });
      });
    },
    watch:{
      addModalObj:{
        handler(v1){
          //console.log(v1);
          if( v1.isShow === true ){ //监听弹窗变化。
            let session = JSON.parse(sessionStorage.getItem("stationCommunication"));
            this.getSessionStorage.name = session.name;
            this.getSessionStorage.id = session.id;
            //this.policeData.stationId = this.getSessionStorage.id;
            this.stationName = this.getSessionStorage.name;
            this.sectionParams.parentId = this.getSessionStorage.id
            ////console.log(session);
          }
        },
        deep:true
      }
    },
    methods:{
      //提交
      subBtn(){

        if( this.verifyForm.isNull(this.sectionParams.stationName) ){
          this.s_alert("部门名称不能为空！");
          // alert("部门名称不能为空！");
          return false;
        }else if( this.verifyForm.isNull(this.sectionParams.orgcode) || this.verifyForm.letterAndNumber(this.sectionParams.orgcode) ){
          this.s_alert("组织代码为空或格式不正确！只能填写字母和数字！");
          // alert("组织代码不能为空！");
          return false;
        }else if(  this.verifyForm.letterAndNumber(this.sectionParams.baseNum) ){
          this.s_alert("基地台号只能为字母和数字！");
          // alert("组织代码不能为空！");
          return false;
        } else if( this.sectionParams.carCount && this.sectionParams.carCount.length > 2 || this.verifyForm.isNumber(this.sectionParams.carCount)  ){
          this.s_alert("警车格式不正确！只能为整数并且最大99辆！");
          return false;
        } else if( this.verifyForm.isNull(this.sectionParams.stationNum) ){
          this.s_alert("请选择部门类型！");
          // alert("组织编号不能为空！");
          return false;
        }else if( this.verifyForm.isIphoneOrTell(this.sectionParams.tel) ){
          this.s_alert("输入联系电话格式错误！8或11位纯数字，如（01012345678或12345678）");
          // alert("输入联系电话格式错误！");
          return false;
        }else if(  this.verifyForm.ifLongitude(this.sectionParams.longitude) ){
          this.s_alert("经度格式不正确或区间范围不在正负180以内，并且小数点后最长只能有8位数！");
          // alert("经度格式不正确或区间范围不在正负180以内，并且小数点后最长只能有18位数！");
          return false;
        }else if( this.verifyForm.isNumber(this.sectionParams.sort) ){
          this.s_alert("排序字段只能为整数！");
          return false;
        }else if( this.verifyForm.ifLatitude(this.sectionParams.latitude) ){
          this.s_alert("纬度格式不正确或区间范围不在正负90以内，并且小数点后最长只能有8位数！");
          // alert("纬度格式不正确或区间范围不在正负90以内，并且小数点后最长只能有18位数！");
          return false;
        }else if( this.verifyForm.letterAndNumber(this.sectionParams.unitNumber) ){
          this.s_alert("单位编码格式不正确！只能为字母或数字！");
          return false;
        }else if( this.verifyForm.isNull(this.sectionParams.ipAddress) ){
          this.sectionParams.ipAddress = null;
        }else if( this.verifyForm.isIP(this.sectionParams.ipAddress) ){
          this.s_alert("ip地址不正确！");
          return false;
        }
        this.s_loading(true);
        //唯一验证
        this.$axios.get(this.HOST+"/station/getStationInfoByOrgCode",{
          params:{
            orgCode:this.sectionParams.orgcode
          }})
          .then(res=>{
            console.log(res.data);
            if( res.data.length > 0 ){
              this.s_alert("该组织代码已经存在！");
            }else{
              let params = {};
              for( let sectionParamsKey in this.sectionParams ){
                params[sectionParamsKey] = this.sectionParams[sectionParamsKey];
              }
              this.$axios.post(this.HOST+"/station/",params)
                .then((data)=>{
                  //console.log(data);
                  if( data.data.success === true ){
                    this.s_alert("新增成功！");
                    // alert("新增成功！");
                    this.initAddSectionData();
                    this.s_logwrite("基础信息管理-部门管理","新增部门");
                    this.closeModal();
                    this.$emit("newPoliceSucceed");//刷新页面
                  }
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }
            this.s_loading(false);
          })
          .catch(err=>{
            console.log(err);
            this.s_loading(false);
          });

      },
      //更新
      upDataSub(){

      },
      //警员类型列表
      policeTypeFn(){
        this.$axios.get(this.HOST+"/police/getAllPoliceType")
          .then((data)=>{
            this.policeType = data.data;
            //console.log(this.policeType);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //警员岗位列表
      policePositionFn(){
        this.$axios.get(this.HOST+"/police/getAllPolicePosition")
          .then((data)=>{
            this.policePosition = data.data;
            //console.log(this.policePosition);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //是否使用
      selectIfUse(ele){
        this.sectionParams.ifUse = ele.target.value;
        ////console.log(ele.target.value);
      },
      //部门类型
      selectStationNum(ele){
        this.sectionParams.stationNum = ele.target.value;
        ////console.log(ele.target.value);
      },
      //是否使用
      selectisZsjg(ele){
        this.sectionParams.isZsjg = ele.target.value;
        ////console.log(ele.target.value);
      },

      //是否口子所
      selectisCzs(ele){
        this.sectionParams.isCzs = ele.target.value;
        ////console.log(ele.target.value);
      },

      //是否使用
      selectisBusinessDepartment(ele){
        this.sectionParams.isBusinessDepartment = ele.target.value;
        ////console.log(ele.target.value);
      },

      //获取部门树
      getStationTree(){
        this.sectionTreeIShow = !this.sectionTreeIShow;
        if( this.sectionTreeIShow ){
          this.$axios.get(this.HOST+'/station/getOrgaInfo')
            .then((data)=>{
              $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
        }
        ////console.log(this.getSessionStorage.id);
      },
      //关闭模态窗
      closeModal(){
        this.$emit("closeModalAddPolice");
        this.initAddSectionData();
      },
      prohibitDot(e){
        if( e.keyCode=== 189 || e.keyCode=== 109 || e.keyCode=== 107 ||e.keyCode=== 110  ){
          this.s_alert("只能输入数字!");
          // alert("只能输入数字!");
          this.sectionParams.sort = " ";
        }
      },
      //清除新增部门
      initAddSectionData(){
        this.sectionParams={
            stationName:"", //部门名称
            ifUse:"1", //是否使用
            parentId:"", //上级部门
            ipAddress:"", //部门IP
            address:"", //部门地址
            tel:"", //联系电话
            orgcode:"",  //组织代码
            stationNum:"-1", //组织编号
            coverRange:"", //覆盖范围
            carCount:"", //警车数量
            baseNum:"", //基地台号
            unitNumber:"", //单位编码
            longitude:"", //经度
            latitude:"", //纬度
            sort:"", //排序
            glxq:"", //管辖区域
            rkqk:"", //人口情况
            sqzrq:"", //社区/责任区
            jlqk:"", //警力情况
            zdbw:"", //重点部位
            zdjq:"", //重点警情
            isZsjg:"0", //是否直属机构
            isCzs:"0", //是否口子所
            isBusinessDepartment:"0",
        }
      }
    }
  }
</script>

<style scoped>
  .sectionTree-box{
    position: absolute;
    z-index: 99;
    padding: 10px;
    right: 0;
    width: 60%;
    top: 30px;
    height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.2);
  }
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
</style>
